<template>
  <div class="commend_area">
    <div class="commend_area_title">
      <img src="../../../assets/img/home/ic_good.png" alt="" />
      <span class="title">小编推荐</span>
    </div>
    <div class="container">
      <swiper :options="swiperOption">
        <swiper-slide
          class="area-list"
          v-for="(son, index) in resultList"
          :key="index"
          :slides-per-view="3"
        >
          <div v-for="(item, id) in son" :key="id" class="list-box" @click="itemClick(index,id)">
            <div class="gameicon">
              <img :src="item.gameicon" alt="" />
            </div>
            <div class="game-list">
              <div class="gamename">
                <div :class="[item.game_type == 2 ? 'gamename-name-discount' : 'gamename-name']">{{item.gamename}}</div>
                <div class="ganename-discount" v-if="item.game_type == 2">{{item.discount}}折</div>
              </div>
              <div class="genre-str">
              <div>{{item.genre_str}}</div>
                <ul v-show="item.game_labels != null && item.game_type != 1" class="genre-str-label">
                  <li v-for="(label, i) in item.game_labels" :key="i" :style="{border: '1px solid' + label.bgcolor,'color': label.bgcolor}">{{label.label_name}}</li>
                </ul>
              </div>
              <div>
                <div v-if="item.game_type == 1" class="game_type_box">
                  <span
                    v-for="(label, i) in item.game_labels"
                    :key="i"
                    class="labels"
                    :style="{ background: label.bgcolor + '2d' }"
                  >
                    <div :style="{ color: label.bgcolor }" class="labels-text">
                      {{ label.label_name }}
                    </div>
                  </span>
                </div>
                <div v-else class="game-summary">{{ item.game_summary }}</div>
              </div>
            </div>
            <div class="download">
              <div class="download-img" v-if="item.has_coupon == 1">
                <img src="" alt="" />
              </div>
              <div class="download-btn">下载</div>
            </div>
          </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination"></div> -->
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  props: {
    commendList: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // list: [
      //   {begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{
      //     begintime:"",
      //     client_package_name:"",
      //     client_size:"219.2",
      //     client_type:"3",
      //     client_version_code:"0",
      //     client_version_name:"",
      //     discount:"4.2",
      //     endtime:"",
      //     first_label:null,
      //     flash_discount:"3.5",
      //     flash_discount_endtime:"1626948000",
      //     flash_type:5,
      //     game_labels:null,
      //     game_summary:"天金神将斗九州，合击战三国！我就是神呀哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
      //     game_type:"2",
      //     gameicon:"https://p1.277sy.com/2021/02/02/6018c9e2e3776.gif",
      //     gameid:"4294",
      //     gamename:"少年名将我的就是你的呀",
      //     gameshort:"snmj",
      //     genre_str:"卡牌 • 三国",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },{begintime:"",
      //   client_package_name:"",
      //   client_size:"179.5",
      //   client_type:"3",
      //   client_version_code:"0",
      //   client_version_name:"",
      //   endtime:"",
      //   first_label:null,
      //   game_label:"送满级VIP",
      //   game_labels: [{
      //     bgcolor:"#59bcf6",
      //     label_name:"官方变态服",
      //     },{
      //       bgcolor:"#ffaa1c",
      //       label_name:"充值1:10000",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"送满级VIP",
      //     },{
      //       bgcolor:"#ff7c7c",
      //       label_name:"元宝200W",
      //     },{
      //       bgcolor:"#ff8839",
      //       label_name:"绑定元宝300W",
      //     }
      //   ],
      //   game_summary:"上线送满VIP、绑定元宝300W、铜币500W，元宝200W",
      //   game_type:"1",
      //   gameicon:"https://p1.277sy.com/2021/04/23/608274bea4945.gif",
      //   gameid:"5546",
      //   gamename:"妖神传说(GM管理特权)",
      //   gameshort:"yscsgm",
      //   genre_str:"角色 • 仙侠",
      //   has_coupon:1,
      //   lb_sort:"12",
      //   max_rate:0,
      //   offline:0,
      //   online_time:"1619224200",
      //   payrate:"10000",
      //   video_pic:"",
      //   video_url:"http://mp4.277sy.com/sp/5546.mp4",
      //   },
      // ],
      pageCount: 3,
      swiperOption: {
        slidesPerView: 'auto',
      }
    }
  },
  methods: {
    itemClick(index,id) {
      
    }
  },
  computed: {
    list() {
      return this.commendList.list
    },
    resultList() {
      let i = 0;
      const resultArr = [];
      while ((1 + i) * this.pageCount <= this.list.length) {
        resultArr.push(
          this.list.slice(i * this.pageCount, (i + 1) * this.pageCount)
        );
        i++;
      }
      return resultArr;
    },
  },
}
</script>

<style lang="less" scoped>
.commend_area {
  width: 9.466667rem;
  height: 7.706667rem;
  background: #fff;
  border-radius: .266667rem;
  margin: .266667rem auto 0;
  font-size: .48rem;
  font-weight: 800;
  color: #000000;
  .commend_area_title {
    padding: .4rem 0 0 .266667rem;
    display: flex;
    align-items: center;
    img {
      margin-right: 0.133333rem;
      display: inline-block;
      width: 0.586667rem;
      height: 0.586667rem;
    }
  }
}

.container {
  margin-top: .4rem;
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 5.92rem;
  width: 8.933333rem!important;
  width: auto;
}

.area-list:last-child {
  display: flex;
  flex-wrap: wrap;
  height: 5.92rem;
  width: 9.466667rem!important;
  width: auto;
}

.area-list:last-child .list-box {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 9.466667rem;
  padding: 0 .266667rem;
  height: 1.706667rem;
}

.list-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 8.933333rem;
  padding: 0 .266667rem;
  height: 1.706667rem;
}

.gameicon {
  flex-shrink: 1;
}

.gameicon img {
  display: block;
  width: 1.706667rem;
  height: 1.706667rem;
}

.game-list {
  margin-left: .133333rem;
  height: 1.706667rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.gamename {
  display: flex;
  align-items: center;
  font-size: .4rem;
  font-weight: bold;
  color: #222222;
}

.gamename-name {
  font-size: .4rem;
  font-weight: 700;
  color: #222222;
  width: 4.666667rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.gamename-name-discount {
  font-size: .4rem;
  font-weight: 700;
  color: #222222;
  width: 3.733333rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ganename-discount {
  margin-left: .133333rem;
  width: 1.066667rem;
  height: .426667rem;
  background: linear-gradient(134deg, #FFAC58 0%, #FF4600 100%);
  border-radius: .213333rem;
  font-size: .32rem;
  font-weight: 400;
  color: #ffffff;
  line-height: .426667rem;
  text-align: center;
}

.genre-str {
  display: flex;
  align-items: center;
  font-size: .32rem;
  font-weight: 400;
  color: #808080;
}

.genre-str-label {
  display: flex;
  align-items: center;
}

.genre-str-label li {
  display: flex;
  align-items: center;
  height: .426667rem;
  font-size: .266667rem;
  line-height: .426667rem;
  border-radius: .08rem;
  padding: 0 .066667rem;
  margin-left: .133333rem;
}

.labels {
  display: inline-block;
  height: .333333rem;
  line-height: .333333rem;
  padding: 0 .08rem;
  margin-right: .08rem;
  margin-bottom: .08rem;
}

.game_type_box {
  width: 4.773333rem;
  height: .8rem;
  font-size: .266667rem;
  overflow: hidden;
}

.labels-text {
  font-size: .266667rem;
  font-weight: 400;
  text-align: center;
}

.game-summary {
  font-size: .32rem;
  font-weight: 400;
  color: #808080;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.download {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-img {
  width: 1.186667rem;
  height: .573333rem;
  margin-top: -0.666667rem;
}

.download-btn {
  width: 1.44rem;
  height: .613333rem;
  background: #FF5543;
  border-radius: .306667rem;
  font-size: .346667rem;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: .613333rem;
  margin-top: .133333rem;
}
.container {
  position: relative;
}
.swiper-pagination {
  width: 750px;
  height: auto;
  position: absolute!important;
  right: 0;
  bottom: 0;
}
</style>